<template>
  <div class="history-wrapper">
    <h1 class="title">
      <span>搜索历史</span>
      <icon-svg v-show="history.length" @click.native="history = []" icon-class="shanchu1" />
    </h1>
    <ul class="history-list">
      <li class="item" v-for="item in history" :key="item" v-text="item" @click="$emit('select', item)" />
      <li class="item no-history" v-if="!history.length">没有历史记录哦~</li>
    </ul>
  </div>
</template>

<script>
import { STORAGE_HISTORY } from 'common/js/constant'

export default {
  name: 'history',
  data () {
    return {
      history: localStorage.getItem(STORAGE_HISTORY)
        ? localStorage.getItem(STORAGE_HISTORY).split(',')
        : []
    }
  },
  methods: {
    getHistory () {
      this.history = localStorage.getItem(STORAGE_HISTORY)
        ? localStorage.getItem(STORAGE_HISTORY).split(',')
        : []
    }
  },
  watch: {
    history (list) {
      localStorage.setItem(STORAGE_HISTORY, list)
    }
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";

  .history-wrapper {
    .title {
      margin: 7px 12px;
      font-size: @font-size-large-x;
      color: @color-text;
      text-align: left;
      svg {
        font-size: 20px;
        color: @color-text-d;
      }
    }
    .history-list {
      padding: 7px 12px;
      .item {
        padding: 12px 0;
        text-align: left;
        font-size: @font-size-medium-x;
        color: @color-text-d;
      }
      .no-history {
        padding: 20px 0;
        text-align: center;
      }
    }

  }
</style>
